<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>伪网站-购物车</title>
  <link rel="stylesheet" href="../CSS/购物车.css">
</head>


<body>
  <h1>
    <p><a href="./首页.html">回到首页</a></p>
  </h1>
  <div class="box1">
    <span class="first">首页</span>
    <span class="prev">上一页</span>
    <span class="total">1 / 100</span>
    <span class="next">下一页</span>
    <span class="end">末页</span>
    <input class='jump' type="number">
    <button class="jump1">跳转</button>
    <select class="select" name="" id="">
      <option value="12">12</option>
      <option value="16">16</option>
      <option value="20">20</option>
      <option value="24">24</option>
    </select>
  </div>
  <ul>
    <li>

    </li>
  </ul>
</body>
<script src="../axios.min.js"></script>
<script src="../http.js"></script>
<script>

  let PageTotal;
  let firstBtn = document.querySelector('.first');
  let endBtn = document.querySelector('.end');
  let prevBtn = document.querySelector('.prev');
  let nextBtn = document.querySelector('.next');
  let totalEle = document.querySelector('.total');
  let selBtn = document.querySelector('.select');
  let jumpnumber = document.querySelector('.jump');
  let jumpBtn = document.querySelector('.jump1');
  let ulBox = document.querySelector('ul');
  const queryObj = {
    current: 1,
    pagesize: 12,
  }
  // 获得购物车数据
  async function getCartData() {
    // 获得第一页开始的12条购物车内容
    let res = await http.get('/goods/list', { params: queryObj })
    r = res.data.list;
    
    // 查看总页数
    PageTotal = res.data.total;
    
    // let currentData = res.data.list.slice((current - 1) * pagesize, current * pagesize);
    let htmlStr = ''
    r.forEach(function(item) {
      console.log(item)
      htmlStr += `
      <li>
      <img src="${item.img_big_logo}" alt="">
      <div class="is_host" style="display:${item.is_hot == true ? 'block' : 'none'}">热销</div>
      <div class="is_sale" style="display:${item.is_sale == true ? 'block' : 'none'}">折扣</div>
      <p class="title">${item.title}</p>
      <div class="info">
        <p>￥ ${item.current_price}</p>
        <p>￥ ${item.price}</p>
      </div>
    </li>`
      
    })

    ulBox.innerHTML = htmlStr;
    totalEle.innerHTML = `${queryObj.current}/${PageTotal}`
    if (queryObj.current == 1) firstBtn.classList.add('gray')
    else firstBtn.classList.remove('gray')

    if (queryObj.current == PageTotal) endBtn.classList.add('gray')
    else endBtn.classList.remove('gray')

    if (queryObj.current == 1) prevBtn.classList.add('gray')
    else prevBtn.classList.remove('gray')

    if (queryObj.current == PageTotal) nextBtn.classList.add('gray')
    else nextBtn.classList.remove('gray')
  }
  getCartData()
  // 点击首页
  firstBtn.onclick = function () {
    if (queryObj.current == 1) return;
    queryObj.current = 1;
    getCartData();
  }
// 点击末页
  endBtn.onclick = function () {
    queryObj.current = PageTotal;
    getCartData();
  }
// 点击下一页事件
  nextBtn.onclick = function () {
    if (queryObj.current == PageTotal) return;
    queryObj.current++;
    getCartData()
  }
// 点击上一页事件
  prevBtn.onclick = function () {
    if (queryObj.current == 1) return;
    queryObj.current--;
    getCartData();
  }
// 跳转页数事件
  jumpBtn.onclick = function () {
    queryObj.current = parseInt(jumpnumber.value);
    getCartData();
    if (queryObj.current > PageTotal) {
      alert('超出最大页数');
      queryObj.current = PageTotal;
      getCartData();
      jumpnumber.value = PageTotal;
    }
  }
// 选择每页显示数量
  selBtn.onchange = function () {
    queryObj.pagesize = selBtn.value;
    PageTotal = Math.ceil(PageTotal / queryObj.pagesize);
    queryObj.current = 1;
    getCartData();
    jumpnumber.value = ''
   
  }
  ulBox.onclick = async function(e){
    if(e.target.tagName == 'IMG'){
        let res = await http.get('/goods/list', { params: queryObj })
            let r = res.data.list;
            r.forEach(function(item){
              if(e.target.src == item.img_big_logo)
            {   
              
              localStorage.setItem('goods_id', item.goods_id);
              location.href = "./商品详情.html"
            }
            }
          )
          
      
 }}
</script>

</html>